<div class="options-endpoints-container">
    <div class="options-endpoints-top">
        <span class="property-name">{{Title}} <info-tooltip [Message]="'List of available endpoints. Click the dropdown to show allowed methods and actions.'"></info-tooltip></span>
        <div>
            <span *ngIf="ShowCounter">[{{this.Model.options[Property].length}}]</span>
            <span *ngIf="Multiple" class="button-icon" (click)="addEndpoint()"><i class="fas fa-plus"></i></span>
        </div>
    </div>
    <div class="options-endpoints">
        <div class="options-endpoint" *ngFor="let endpoint of this.Model.options[Property]">
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        <input (blur)="handleEndpointUrlChange(endpoint)" (change)="AfterChange()" class="endpoint-url" type="text" spellcheck="false" [(ngModel)]="endpoint.url" placeholder="url">
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <div class="options-endpoint-menu-top">
                    <mat-form-field class="endpoint-method" appearance="fill">
                        <mat-select *ngIf="Type == APIType.REST" (selectionChange)="AfterChange()" (closed)="handleEndpointMethodChange(endpoint)" [disabled]="!ModifiableMethods" [(ngModel)]="endpoint.supportedMethods" multiple required>
                            <mat-option *ngFor="let method of HTTPMethodKeys" [value]="method">{{ formatMethod(HTTPMethod[method], DatabaseEndpoints) }}</mat-option>
                        </mat-select>
                        <mat-select *ngIf="Type == APIType.GraphQL" (selectionChange)="AfterChange()" (closed)="handleEndpointMethodChange(endpoint)" [disabled]="!ModifiableMethods" [(ngModel)]="endpoint.supportedMethods" multiple required>
                            <mat-option [value]="HTTPMethod.GET">GET</mat-option>
                            <mat-option [value]="HTTPMethod.POST">POST</mat-option>
                        </mat-select>
                        <mat-select *ngIf="Type == APIType.RPC || Type == APIType.gRPC" (selectionChange)="AfterChange()" (closed)="handleEndpointMethodChange(endpoint)" [disabled]="!ModifiableMethods" [(ngModel)]="endpoint.supportedMethods[0]" required>
                            <mat-option [value]="HTTPMethod.GET">GET</mat-option>
                            <mat-option [value]="HTTPMethod.POST">POST</mat-option>
                        </mat-select>
                        <mat-select *ngIf="Type == APIType.WebSockets" (selectionChange)="AfterChange()" (closed)="handleEndpointMethodChange(endpoint)" disabled [(ngModel)]="endpoint.supportedMethods[0]">
                            <mat-option [value]="HTTPMethod.GET">GET</mat-option>
                        </mat-select>
                    </mat-form-field>
                    <mat-form-field class="endpoint-grpcmode" appearance="fill" *ngIf="Type == APIType.gRPC">
                        <mat-select (selectionChange)="AfterChange()" [disabled]="endpoint.protocol == Protocol.WebSockets" [(ngModel)]="endpoint.grpcMode" required>
                            <mat-option *ngFor="let mode of gRPCModeKeys" [value]="mode">{{ gRPCMode[mode] }}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
                <div class="options-endpoint-actions-container" *ngIf="HasActions && (HasStreamActions || endpoint.grpcMode == gRPCMode['Unary'] && endpoint.protocol !== Protocol.WebSockets)">
                    <div class="options-endpoint-action">
                        <span class="property-name action-endpoint">Actions: <info-tooltip [Message]="'List of actions of the endpoint. Change the target endpoint and method used.'"></info-tooltip></span>
                        <span class="action-method"></span>
                        <span class="button-icon" (click)="addAction(endpoint)"><i class="fas fa-plus"></i></span>
                    </div>
                    <div class="options-endpoint-actions">
                        <div class="options-endpoint-action" *ngFor="let action of endpoint.actions">
                            <mat-form-field appearance="fill" class="action-endpoint">
                                <mat-select (selectionChange)="handleActionEndpointChange(endpoint, action); AfterChange()" [(ngModel)]="action.endpoint">
                                    <mat-option 
                                    [disabled]="(((endpoint.grpcMode == gRPCMode.Unary || endpoint.grpcMode == gRPCMode['Client Streaming']) && (connendpoint.protocol == Protocol.WebSockets || connendpoint.grpcMode == gRPCMode['Server Streaming'] || connendpoint.grpcMode == gRPCMode['Bidirectional Streaming'])) || (endpoint.grpcMode == gRPCMode['Server Streaming'] && connendpoint.grpcMode == gRPCMode['Client Streaming'])) && !(Type == APIType.WebSockets && connendpoint.protocol == Protocol.WebSockets)"
                                    *ngFor="let connendpoint of ConnectableEndpoints" [value]="connendpoint">{{connendpoint.url}}</mat-option>
                                </mat-select>
                            </mat-form-field>
                            <mat-form-field appearance="fill" class="action-method">
                                <mat-select (selectionChange)="AfterChange()" [(ngModel)]="action.method" *ngIf="action.endpoint != null; else emptyMethod">
                                    <mat-option *ngIf="action.endpoint.protocol != Protocol.WebSockets && endpoint.protocol != Protocol.WebSockets" [value]="EndpointActionHTTPMethod.Inherit">Inherit</mat-option>
                                    <mat-option *ngFor="let method of action.endpoint.supportedMethods" [value]="EndpointActionHTTPMethod[HTTPMethod[method]]">{{ formatMethod(HTTPMethod[method+''], action.endpoint.protocol == Protocol.Database) }}</mat-option>
                                </mat-select>
                                <ng-template #emptyMethod>
                                    <mat-select disabled>
                                        <mat-option></mat-option>
                                    </mat-select>
                                </ng-template>
                            </mat-form-field>
                            <span [class.disabled]="action.endpoint == null || action.endpoint.protocol === Protocol.WebSockets || action.endpoint.grpcMode !== gRPCMode.Unary" (click)="action.asynchronous = !(action.asynchronous || false)" 
                                [class.checked]="action.asynchronous === true" class="async-check"
                                matTooltip="{{ 'Make action asynchronous' }}">
                                    A
                            </span>
                            <span class="button-icon" (click)="removeAction(endpoint, action)"><i class="fas fa-minus"></i></span>
                        </div>
                    </div>
                </div>
            </mat-expansion-panel>
            <span *ngIf="APIType.GraphQL && Multiple" class="button-icon remove-endpoint" (click)="removeEndpoint(endpoint)"><i class="fas fa-minus"></i></span>
        </div>
    </div>
</div>